feat(dashboard): scheduled digest #7314

LetItRock · 2024-12-17T12:12:03Z

What changed? Why was the change needed?

Scheduled digest:

the new UI that generates the control value with the cron expression
had to make the sidebar a bit bigger by 50px so the digest fields would fit well
multi-select component
time component (not used)
fixes the three bugs:

Screenshots

Screen.Recording.2024-12-17.at.12.43.57.mov

Screen.Recording.2024-12-17.at.12.45.39.mov

linear · 2024-12-17T12:12:05Z

NV-4585 Implement interval digest

netlify · 2024-12-17T12:12:28Z

✅ Deploy Preview for dev-web-novu ready!

Name	Link
🔨 Latest commit	`3b2b19f`
🔍 Latest deploy log	https://app.netlify.com/sites/dev-web-novu/deploys/6762c871613695000823e7eb
😎 Deploy Preview	https://deploy-preview-7314.dashboard.novu-staging.co
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2024-12-17T12:14:27Z

✅ Deploy Preview for dashboard-v2-novu-staging ready!

Name	Link
🔨 Latest commit	`3b2b19f`
🔍 Latest deploy log	https://app.netlify.com/sites/dashboard-v2-novu-staging/deploys/6762c871f97f4e0008e07e24
😎 Deploy Preview	https://deploy-preview-7314.dashboard-v2.novu-staging.co
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

LetItRock · 2024-12-17T12:13:17Z

apps/dashboard/index.html

@@ -16,7 +16,7 @@
      rel="stylesheet"
    />
    <link
-      href="https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap"


the font used for the amount input

LetItRock · 2024-12-17T12:14:20Z

apps/dashboard/package.json

@@ -69,11 +70,13 @@
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "cmdk": "1.0.0",
+    "cron-parser": "^4.9.0",


the library used to parse and generate cron expression

LetItRock · 2024-12-17T12:15:24Z

apps/dashboard/src/components/amount-input.tsx

+  shouldUnregister?: boolean;
+};
+
+const AmountInputContainer = ({


All the changes I made here are: split components into smaller independent pieces so they can be reused without being dependent on the form

LetItRock · 2024-12-17T12:16:03Z

apps/dashboard/src/components/primitives/form/form.tsx

@@ -61,7 +61,7 @@ const FormLabel = React.forwardRef<
          >
            <BsFillInfoCircleFill className="text-foreground-300 -mt-0.5 inline size-3" />
          </TooltipTrigger>
-          <TooltipContent>{tooltip}</TooltipContent>
+          <TooltipContent className="max-w-56">{tooltip}</TooltipContent>


Adjust the max width of the tooltip content so it doesn't look weird

LetItRock · 2024-12-17T12:16:54Z

apps/dashboard/src/components/primitives/multi-select.tsx

+import { Command, CommandGroup, CommandItem, CommandList } from '@/components/primitives/command';
+import { selectTriggerVariants } from '@/components/primitives/select';
+
+export const MultiSelect = <T extends string | number>({


The dropdown component where the user can pick multiple values.

LetItRock · 2024-12-17T12:26:05Z

apps/dashboard/src/components/workflow-editor/steps/digest/scheduled-digest.tsx

+  const { second, month, dayOfMonth, dayOfWeek, hour, minute } = useMemo(() => {
+    try {
+      const expression = cronParser.parseExpression(value);
+      return toUiFields(expression.fields);
+    } catch (e) {
+      onError?.(e);
+
+      return {
+        second: [],
+        minute: [],
+        hour: [],
+        dayOfMonth: [],
+        month: [],
+        dayOfWeek: [],
+      };
+    }
+  }, [value, onError]);


Parse the cron value and get the form field values.

LetItRock · 2024-12-17T12:26:52Z

apps/dashboard/src/components/workflow-editor/steps/digest/scheduled-digest.tsx

+  const handleValueChange = (fields: Partial<UiCronFields>) => {
+    const cronFields = toCronFields({
+      second,
+      minute,
+      hour,
+      dayOfWeek,
+      dayOfMonth,
+      month,
+      ...fields,
+    });
+
+    onValueChange(cronParser.fieldsToExpression(cronFields).stringify());
+  };


We will generate a new cron expression when any value is changed on the UI.

LetItRock · 2024-12-17T12:27:42Z

apps/dashboard/src/components/workflow-editor/steps/digest/scheduled-digest.tsx

+  };
+
+  const handlePeriodChange = (period: string) => {
+    onValueChange(getCronBasedOnPeriod(period as PeriodValues, { second, minute, hour, dayOfWeek, dayOfMonth, month }));


When the period value changes, we need to generate a new cron expression but preserve the previously selected user values.

LetItRock · 2024-12-17T12:28:41Z

apps/dashboard/src/utils/time.ts

+/**
+ * regular expression to check for valid hour format (01-23)
+ */
+export function isValidHour(value: string) {


This file utils are used by the TimePicker component

LetItRock · 2024-12-17T12:32:47Z

apps/dashboard/src/components/workflow-editor/steps/digest/utils.ts

@@ -0,0 +1,403 @@
+import cronParser, {


These are the utils used by the scheduled digest UI to calculate the period from the cron and based on the current period value selected (when switching).
There are also utils that convert the cron fields to UI field values because the cron-parser for * generates the array with all values, but on the UI, we use an empty array as a sign for * basically every day, month, hour etc.

LetItRock · 2024-12-17T12:36:06Z

apps/dashboard/src/pages/edit-workflow.tsx

@@ -10,7 +10,7 @@ export const EditWorkflowPage = () => {
      <EditWorkflowLayout headerStartItems={<EditorBreadcrumbs />}>
        <div className="flex h-full flex-1 flex-nowrap">
          <WorkflowTabs />
-          <aside className="text-foreground-950 [&_textarea]:text-neutral-600'; flex h-full w-[300px] max-w-[350px] flex-col border-l [&_input]:text-xs [&_input]:text-neutral-600 [&_label]:text-xs [&_label]:font-medium [&_textarea]:text-xs">
+          <aside className="text-foreground-950 [&_textarea]:text-neutral-600'; flex h-full w-[350px] max-w-[350px] flex-col border-l [&_input]:text-xs [&_input]:text-neutral-600 [&_label]:text-xs [&_label]:font-medium [&_textarea]:text-xs">


Unfortunately, I had to make the sidebar wider, otherwise the scheduled digest UI doesn't fit and look well.

pkg-pr-new · 2024-12-17T13:11:24Z

Open in Stackblitz

@novu/client

npm i https://pkg.pr.new/novuhq/novu/@novu/client@7314

@novu/headless

npm i https://pkg.pr.new/novuhq/novu/@novu/headless@7314

@novu/framework

npm i https://pkg.pr.new/novuhq/novu/@novu/framework@7314

@novu/js

npm i https://pkg.pr.new/novuhq/novu/@novu/js@7314

@novu/nest

npm i https://pkg.pr.new/novuhq/novu/@novu/nest@7314

@novu/nextjs

npm i https://pkg.pr.new/novuhq/novu/@novu/nextjs@7314

@novu/node

npm i https://pkg.pr.new/novuhq/novu/@novu/node@7314

@novu/notification-center

npm i https://pkg.pr.new/novuhq/novu/@novu/notification-center@7314

novu

npm i https://pkg.pr.new/novuhq/novu@7314

@novu/providers

npm i https://pkg.pr.new/novuhq/novu/@novu/providers@7314

@novu/react

npm i https://pkg.pr.new/novuhq/novu/@novu/react@7314

@novu/react-native

npm i https://pkg.pr.new/novuhq/novu/@novu/react-native@7314

@novu/shared

npm i https://pkg.pr.new/novuhq/novu/@novu/shared@7314

@novu/stateless

npm i https://pkg.pr.new/novuhq/novu/@novu/stateless@7314

commit: 3b2b19f

BiswaViraj

Amazing work on this 🔥

Left a couple of comments.

Screen.Recording.2024-12-18.at.6.24.43.PM.mov

The date selector is a little buggy for the "February" month. I also think we should hide the 30/31 date for feb and "31" for appropriate months. or just have a disabled UI state. as currently it allows selecting the date but the apply button remains stucked.

BiswaViraj · 2024-12-18T12:49:57Z

apps/dashboard/src/components/workflow-editor/steps/digest/digest-window.tsx

+          setDigestType(value);
+          if (value === SCHEDULED_DIGEST_TYPE) {
+            setValue(AMOUNT_KEY, undefined, { shouldDirty: true });
+            setValue(UNIT_KEY, undefined, { shouldDirty: true });
+            setValue(CRON_KEY, EVERY_MINUTE_CRON, { shouldDirty: true });
+          } else {
+            setValue(AMOUNT_KEY, '', { shouldDirty: true });
+            setValue(UNIT_KEY, TimeUnitEnum.SECONDS, { shouldDirty: true });
+            setValue(CRON_KEY, undefined, { shouldDirty: true });
+          }
+          await trigger();
+          saveForm();


I suggest adding a confirmation popup window when switching the digest tabs.
especially when switching from "schedule" to "regular"
As someone might mis-click it and lose all the progress saved in the scheduled form.

Screen.Recording.2024-12-18.at.6.21.01.PM.mov

LetItRock · 2024-12-18T13:12:04Z

The date selector is a little buggy for the "February" month. I also think we should hide the 30/31 date for feb and "31" for appropriate months. or just have a disabled UI state. as currently it allows selecting the date but the apply button remains stucked.

@BiswaViraj
The "year" period allows you to pick multiple months when your digest (cron) will run; that's why it's not aligned with the particular days in the month. It's implemented according to the functionality of cron expressions which allow selecting 31 day of February.

I suggest adding a confirmation popup window when switching the digest tabs.
especially when switching from "schedule" to "regular"
As someone might mis-click it and lose all the progress saved in the scheduled form.

I agree. I'll talk to Naveen and Radek about that, and we will do it in a separate PR.

ChmaraX

The only weird thing UX-wise is that the values are discarded after switching the tabs, e.g. if someone has already some complex scheduled digest setup and accidentally clicks on "regular" he will lose the setup.

LetItRock · 2024-12-19T09:21:15Z

The only weird thing UX-wise is that the values are discarded after switching the tabs, e.g. if someone has already some complex scheduled digest setup and accidentally clicks on "regular" he will lose the setup.

@ChmaraX yes I agree, there is a ticket to "store" the form values

feat(dashboard): scheduled digest

3529190

LetItRock requested review from SokratisVidros, BiswaViraj, ChmaraX, tatarco, djabarovgeorge and desiprisg December 17, 2024 12:12

LetItRock self-assigned this Dec 17, 2024

github-actions bot added @novu/api @novu/dashboard labels Dec 17, 2024

LetItRock commented Dec 17, 2024

View reviewed changes

LetItRock added 3 commits December 17, 2024 13:48

Merge branch 'next' into nv-4585-scheduled-digest

162e086

chore(dashboard): update lock file

49ef9d5

chore(dashboard): fix input type

a384a7e

LetItRock temporarily deployed to Linting December 17, 2024 13:06 — with GitHub Actions Inactive

Merge branch 'next' into nv-4585-scheduled-digest

e7ce5fd

LetItRock temporarily deployed to Linting December 18, 2024 09:58 — with GitHub Actions Inactive

BiswaViraj reviewed Dec 18, 2024

View reviewed changes

Merge branch 'next' into nv-4585-scheduled-digest

3b2b19f

LetItRock temporarily deployed to Linting December 18, 2024 13:04 — with GitHub Actions Inactive

LetItRock requested a review from BiswaViraj December 18, 2024 13:12

ChmaraX approved these changes Dec 19, 2024

View reviewed changes

BiswaViraj approved these changes Dec 19, 2024

View reviewed changes

LetItRock merged commit f4c4620 into next Dec 19, 2024
45 checks passed

LetItRock deleted the nv-4585-scheduled-digest branch December 19, 2024 10:15

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(dashboard): scheduled digest #7314

feat(dashboard): scheduled digest #7314

LetItRock commented Dec 17, 2024 •

edited

Loading

linear bot commented Dec 17, 2024

netlify bot commented Dec 17, 2024 •

edited

Loading

netlify bot commented Dec 17, 2024 •

edited

Loading

LetItRock Dec 17, 2024

LetItRock Dec 17, 2024

LetItRock Dec 17, 2024

LetItRock Dec 17, 2024

LetItRock Dec 17, 2024

LetItRock Dec 17, 2024

LetItRock Dec 17, 2024

LetItRock Dec 17, 2024

LetItRock Dec 17, 2024

LetItRock Dec 17, 2024

LetItRock Dec 17, 2024

pkg-pr-new bot commented Dec 17, 2024 •

edited

Loading

BiswaViraj left a comment

BiswaViraj Dec 18, 2024

LetItRock commented Dec 18, 2024

ChmaraX left a comment

LetItRock commented Dec 19, 2024

feat(dashboard): scheduled digest #7314

feat(dashboard): scheduled digest #7314

Conversation

LetItRock commented Dec 17, 2024 • edited Loading

What changed? Why was the change needed?

Screenshots

linear bot commented Dec 17, 2024

netlify bot commented Dec 17, 2024 • edited Loading

✅ Deploy Preview for dev-web-novu ready!

netlify bot commented Dec 17, 2024 • edited Loading

✅ Deploy Preview for dashboard-v2-novu-staging ready!

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pkg-pr-new bot commented Dec 17, 2024 • edited Loading

BiswaViraj left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

LetItRock commented Dec 18, 2024

ChmaraX left a comment

Choose a reason for hiding this comment

LetItRock commented Dec 19, 2024

LetItRock commented Dec 17, 2024 •

edited

Loading

netlify bot commented Dec 17, 2024 •

edited

Loading

netlify bot commented Dec 17, 2024 •

edited

Loading

pkg-pr-new bot commented Dec 17, 2024 •

edited

Loading